<script setup>
import { ref, onMounted } from "vue";
import { test } from '@/uni_modules/uview-plus';
import { api } from "@/utils/api";
import { login } from "@/utils";
import { getCaptcha } from "@/utils";
import { useStore } from "@/store";
import UAlert from "../../uni_modules/uview-plus/components/u-alert/u-alert.vue";
import UForm from "../../uni_modules/uview-plus/components/u-form/u-form.vue";
import UFormItem from "../../uni_modules/uview-plus/components/u-form-item/u-form-item.vue";
import UButton from "../../uni_modules/uview-plus/components/u-button/u-button.vue";
import UPicker from "../../uni_modules/uview-plus/components/u-picker/u-picker.vue";
const store = useStore()
if(store.getToken){
  uni.switchTab({
    url: '/pages/home/home'
  })
}
const avatar = ref(undefined);
const show = ref(false)
const loading = ref(true)
const click = ()=>{
  show.value=true;
  setTimeout(()=>{loading.value=false},1000)
}
const list = ref([
  ['学生', '管理员'],
])
const adminReg = /^\w{4,11}/g
const captcha = ref('')
const userForm = ref({
  username: 'admin',
  password: 'admin123',
  identity: '',
  code: '',
  uuid: '',
  captchaEnabled:true
})
const title = ref('')
const typeError = ref(false)
const getUserAvatar = async ()=>{
  const config = {
    path: '/getavatar',
    method: 'POST',
    data: { username: userForm.value.username },
    headers:{
      'Content-Type':'application/x-www-form-urlencoded'
    }
  }
  avatar.value = (await api(config))?.data?.url
}
const handoff = identity=>{
  userForm.value.identity = identity.value[0]
  if(userForm.value.identity===list.value[0][0] && !test.mobile(userForm.value.username)){
    userForm.value.username=''
    title.value='请使用学生账号登录'
    typeError.value=true
  }
  if(userForm.value.identity===list.value[0][1] && !adminReg.test(userForm.value.username)){
    userForm.value.username=''
    title.value='请使用管理员账号登录'
    typeError.value=true
  }
  show.value=false
}
const setUserForm = async () => {
  const { Captcha, uuid } = await getCaptcha()
  captcha.value = Captcha;
  userForm.value.uuid = uuid
}
onMounted( async ()=>{
  await setUserForm()
})
const submit = async ()=>{
  const { username, password, identity, code } = userForm.value
  if(!username || !password || !identity || !code){
    uni.showModal({
      title: '信息填写错误',
      content: '请先填写完整信息'
    })
  }
  else {
    await login(userForm.value);
    await uni.switchTab({
      url: '/pages/home/home'
    })

  }
}
const Register = ()=>{
  uni.redirectTo({url:'/pages/register/register'})
}
</script>

<template>
  <view class="login">
    <u-alert v-if="typeError" :title="title" type = "error" closable></u-alert>
    <view class="container">
      <view class="avatar">
        <image
            fade
            shape="circle"
            style="width: 240rpx; height: 240rpx;"
            :src="avatar??'https://tse4-mm.cn.bing.net/th/id/OIP-C.SpL-NmdQVSuvqgsYD1zP_wHaGB?w=235&h=191&c=7&r=0&o=5&pid=1.7'"
        />
      </view>
      <u-form class="form">
        <u-form-item class="item">
          <u-input
              class="input"
              :maxlength="11"
              placeholder="输入用户名"
              clearable
              v-model="userForm.username"
              @blur="getUserAvatar"
          />
        </u-form-item>
        <u-form-item class="item">
          <u-input
              class="input"
              :maxlength="20"
              password
              placeholder="输入密码"
              clearable
              v-model="userForm.password"
          />
        </u-form-item>
        <u-form-item class="item">
          <u-input
              :maxlength="3"
              type="number"
              placeholder="输入验证码"
              v-model="userForm.code"
          >
            <template #suffix>
              <u-image
                  class="link"
                  width="108"
                  height="40"
                  :src="captcha"
                  @click="setUserForm"
              />
            </template>
          </u-input>
        </u-form-item>
        <u-form-item class="item">
          <u-input
              class="input"
              readonly
              placeholder="选择身份登录"
              clearable
              v-model="userForm.identity"
          >
            <template #suffix>
              <u-button
                  text="选择身份登录"
                  type="primary"
                  @click="click"
              />
            </template>
          </u-input>
        </u-form-item>
        <u-form-item  class="item">
          <u-button class="input" type="primary" text="登录" @click="submit"/>
        </u-form-item>
        <u-form-item  class="item">
          <u-button class="input" type="primary" text="马上注册" @click="Register"/>
        </u-form-item>
      </u-form>
    </view>
    <u-picker
        closeOnClickOverlay
        :loading="loading"
        :show="show"
        :columns="list"
        @confirm="handoff"
        @close="show=false"
        @cancel="show=false"
    />
  </view>
</template>

<style lang="scss" scoped>
.login{
  width: 100vw;
  height: calc(100vh - 44px);
  position: relative;
  .container{
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar{
      border-radius: 50%;
      overflow: hidden;
      width: 220rpx;
      height: 220rpx;
    }
    .form{
      margin-top: 20px;
      .item{
        .input{
          height: 45px;
        }
      }
    }
  }
}
</style>